import { create } from "zustand";
import { persist, devtools } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";
import { ArticleSteps } from "./art-add-store";
import { createStorage } from "@/utils/storage";
import { getArticleApi } from "@/api/article-api";
import { Move } from "./art-add-store";
import to from "await-to-js";
import config from "@/config.json";

type EditStore = {
  article: ArticleEditForm;
  current: ArticleSteps;
};

const initState = {
  current: ArticleSteps.base,
  article: {} as ArticleEditForm,
};

const useArtEditStore = create<EditStore>()(
  immer(
    devtools(
      persist(
        () => {
          return { ...initState };
        },
        {
          name: "art-edit-store",
          // 自定义存储引擎
          storage: createStorage(),
          // 自定义要在本地持久化存储哪些数据
          partialize(state) {
            return { article: state.article };
          },
        }
      ),
      { name: "art-edit-store" }
    )
  )
);

export default useArtEditStore;

// actions
// 请求文章的初始数据，并存储到 store
export const initArticle = async (id: string) => {
  // 1. 调用接口，获取文章详情
  // 2. 把文章详情的数据，存储到 Store
  const [err, res] = await to(getArticleApi(id));
  if (err) return null;
  useArtEditStore.setState((state) => {
    if (res.data) {
      state.article = res.data;
    }
  });
  return true;
};
export const updateBase = (values: ArticleEditBaseForm) => {
  useArtEditStore.setState((state) => {
    state.article = {
      ...state.article,
      ...values,
    };
  });
};
export const updateCurrent = (step: Move = Move.next) => {
  useArtEditStore.setState((state) => {
    state.current = state.current + step;
  });
};
export const resetCurrent = () => {
  useArtEditStore.setState((state) => {
    state.current = ArticleSteps.base;
  });
};

// 存储文章的封面
export const setArticleCover = (cover: Blob) => {
  useArtEditStore.setState((state) => {
    state.article.cover_img = cover;
  });
};

// 存储文章内容
export const setArticleContent = (content: string) => {
  useArtEditStore.setState((state) => {
    state.article.content = content;
  });
};

// 存储文章的状态
export const setArticleState = (artState: "草稿" | "已发布") => {
  useArtEditStore.setState((state) => {
    state.article.state = artState;
  });
};

// 清空 store 中的文章信息
export const clearArticle = () => {
  useArtEditStore.setState((state) => {
    state.article = {} as ArticleEditForm;
  });
};

// selectors
export const selectCurrent = (state: EditStore) => state.current;
export const selectBase = (state: EditStore) => ({ title: state.article.title, cate_id: state.article.cate_id });
export const selectCover = (state: EditStore) => {
  const cover = state.article.cover_img;
  if (cover) {
    // 把封面的文件，转为 URL 字符串并 return
    if (typeof cover === "string") return config.baseUrl + cover;
    return URL.createObjectURL(cover);
  } else {
    return null;
  }
};
// 派生文章内容
export const selectContent = (state: EditStore) => state.article.content;
export const selectIsShowDraft = (state: EditStore) => state.article.state === "草稿";
